<template>
  <div class="pagenation">
    <xd-pagination background
                   style="text-align: right; margin: 10px 0"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page"
                   :page-sizes="[5,10, 20, 50, 100]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="dataLength">
    </xd-pagination>
  </div>
</template>
<script>
import { Pagination } from 'element-ui'
export default {
  name: 'pagenation',
  components: {
    'xd-pagination': Pagination
  },
  props: {
    dataLength: Number,
    pageSize: Number,
    handleSizeChange: Function,
    handleCurrentChange: Function,
    page: Number
  },
  data () {
    return {
      pagination: {
        currentPage: 1
      }
    }
  }
}
</script>
<style lang="less" scoped>
.pagenation {
  width: 100%;
  padding-top: 15px;
  text-align: center;
}
</style>
